
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>相册列表</title>
  <link rel="stylesheet" href="static/css/albumList.css">
</head>
<body>


<section class="hero-section">
  <button>点击返回上一页</button>
  <div class="card-grid" id="cardGrid">
    <a class="card" href="#">
      <div class="card__background" style="background-image: url(https://images.unsplash.com/photo-1557177324-56c542165309?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80)"></div>
      <div class="card__content">
        <p class="card__category">风景</p>
        <h3 class="card__heading">（相册描述）</h3>
        <button>点击修改描述</button>
      </div>
    </a>

    <!--
    <a class="card" href="#">
      <div class="card__background" style="background-image: url(https://images.unsplash.com/photo-1557004396-66e4174d7bf6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60)"></div>
      <div class="card__content">
        <p class="card__category">美食</p>
        <h3 class="card__heading">（相册描述）</h3>
        <button>点击修改描述</button>
      </div>
    </a>
      -->


    </div>


     </section>

</body>
</html>
<script>
  // 页面加载时触发函数
  window.onload = function () {
    fetchAlbumCategories();
  };

  // 向后端请求相册类别数据
  function fetchAlbumCategories() {
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        let categories = JSON.parse(xhr.responseText);
        createAlbumCards(categories);
      }
    };

    // 替换以下URL为你的后端控制器的地址
    xhr.open("GET", "/getAlbumCategories", true);
    xhr.send();
  }

  // 动态创建相册卡片
  function createAlbumCards(categories) {
    let cardGrid = document.getElementById("cardGrid");

    // 遍历相册类别数组
    for (let i = 0; i < categories.length; i++) {
      let category = categories[i];

      // 创建 <a> 元素
      let cardLink = document.createElement("a");
      cardLink.className = "card";
      cardLink.href = "#"; // 替换为相应的链接


// 在这里添加一个自定义属性来存储相册类别名
      cardLink.setAttribute("data-category", category);

// 为 <a> 元素添加点击事件监听器
      cardLink.addEventListener("click", function() {
        // 获取相册类别名
        let categoryName = this.getAttribute("data-category");

        // 替换以下URL为后端控制器的地址，同时附加相册类别名作为参数
        let backendURL = `/enterAlbum?category=${encodeURIComponent(categoryName)}`;

        console.log("Backend URL:", backendURL);
      });


      // 创建 <div class="card__background">
      let cardBackground = document.createElement("div");
      cardBackground.className = "card__background";
      cardBackground.style.backgroundImage = "url(https://images.unsplash.com/photo-1557177324-56c542165309?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80)"; // 替换为相应的图片链接

      // 创建 <div class="card__content">
      let cardContent = document.createElement("div");
      cardContent.className = "card__content";

      // 创建 <p class="card__category"> 元素
      let cardCategory = document.createElement("p");
      cardCategory.className = "card__category";
      cardCategory.textContent = category; // 设置类别名

      // 创建 <h3 class="card__heading"> 元素
      let cardHeading = document.createElement("h3");
      cardHeading.className = "card__heading";
      cardHeading.textContent = "（相册描述）"; // 替换为相应的描述


      // 创建可编辑的元素（这里使用 contenteditable 属性）
      let editableDescription = document.createElement("span");
      editableDescription.className = "editable";
      editableDescription.textContent = "（相册描述）"; // 替换为相应的描述
      editableDescription.setAttribute("contenteditable", "true");
      cardHeading.appendChild(editableDescription);

      // 创建保存按钮
      let saveButton = document.createElement("button");
      saveButton.textContent = "保存描述";
      saveButton.addEventListener("click", function () {
        saveDescription(editableDescription, category);
      });



      // 将元素添加到 DOM 结构中
      cardContent.appendChild(cardCategory);
      cardContent.appendChild(cardHeading);
      cardContent.appendChild(saveButton);

      cardLink.appendChild(cardBackground);
      cardLink.appendChild(cardContent);

      cardGrid.appendChild(cardLink);
    }
  }

  // 保存描述的函数
  function saveDescription(editableDescription, category) {
    // 获取编辑后的描述
    let newDescription = editableDescription.textContent;

    // 构建请求数据对象
    let requestData = {
      category: category,
      description: newDescription
    };

    // 创建 XMLHttpRequest 对象
    let xhr = new XMLHttpRequest();

    // 设置请求方法和URL
    xhr.open('POST', '/saveDescription', true);

    // 设置请求头
    xhr.setRequestHeader('Content-Type', 'application/json');

    // 处理请求完成时的回调
    xhr.onload = function () {
      if (xhr.status >= 200 && xhr.status < 300) {
        // 请求成功
        console.log('成功保存描述:', xhr.responseText);
      } else {
        // 请求失败
        console.error('保存描述时出错:', xhr.statusText);
      }
    };

    // 处理网络错误
    xhr.onerror = function () {
      console.error('网络错误，保存描述时出错');
    };

    // 发送请求
    xhr.send(JSON.stringify(requestData));
  }

  // 返回上一页的函数
  function goBack() {
    window.location.href="/main";
  }
</script>